<template>

<div>
			<!-- <el-button type="primary" text>
		增加
	</el-button> -->
	<div class="navtexts"> 
		<div class="bianjicj">编辑商品</div>
		<div class="quanbuhei">全部好物<span>></span></div>
		<div class="jihuinavs cur" v-for="(item,index) in navtext" :key="index" :class="nastext == index ? 'redtext' : ''" @click="addnavtext(index)">{{item}}</div>
	</div>
	<div class="addbut cur"  @click="add">+ 添加抽奖</div>
	<!-- Form增加 -->
	<el-dialog v-model="dialogFormVisible" title="商品上传">
		<el-form :model="form">
			<el-form-item label="兑换产品标题" :label-width="formLabelWidth">
				<el-input v-model="form.title" autocomplete="off" />
			</el-form-item>
			<el-form-item label="库存" :label-width="formLabelWidth">
				<el-input v-model="form.kucun" autocomplete="off" />
			</el-form-item>
			<el-form-item label="兑换所需积分" :label-width="formLabelWidth">
				<el-input v-model="form.jfnum" autocomplete="off" />
			</el-form-item>
			<el-form-item label="产品价格" :label-width="formLabelWidth">
				<el-input v-model="form.jiag" autocomplete="off" />
			</el-form-item>
			<el-form-item label="分类名称" :label-width="formLabelWidth">
				<el-select v-model="form.catid" placeholder="请选择分类名称" size="large" >
					<el-option v-for="item in optionshd" :key="item.value" :label="item.label" :value="item.value"/>
				</el-select>
			</el-form-item>
			<el-form-item label="缩略图" :label-width="formLabelWidth">
				<el-upload class="avatar-uploader" :action="`${api}/index.php/index/Adminapi/aliuploadfile`" :data="jm()"
					:show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'images' }) }">
					<img v-if="form.images" :src="HttpnewImg+form.images" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>

			<el-form-item
          label="轮播图片"
          :label-width="formLabelWidth"
        >
        <div style="display: flex">
					<div style="display: flex; align-items: center">
            <div v-for="(image, index) in tplist" :key="index" style="margin:0 10px"> 
              <img :src="HttpnewImg+image" class="avatar" />
              <el-button type="text" @click="deleteImage(index)"
                >删除</el-button
              >
            </div>
          </div>
					<el-upload
            :key="form.lbimages"
						class="avatar-uploader"
            :action="`${api}/index.php/index/Adminapi/aliuploadfile`"
            :show-file-list="false"
            :data="jm()"
            multiple
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
				</div>

          <!-- <span>
				参考尺寸:750*1050
			</span> -->
        </el-form-item>


			<el-form-item label="详情图片" :label-width="formLabelWidth">
				<el-upload class="avatar-uploader" :action="`${api}/index.php/index/Adminapi/aliuploadfile`" :data="jm()"
					:show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'spxqimg' }) }">
					<img v-if="form.spxqimg" :src="HttpnewImg+form.spxqimg" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="postData">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>


	<el-table :data="tableData" style="width: 100%;margin-top:37px" header-cell-style="background-color: #D3D3D3;color:#000000" >
		<el-table-column
		label="排序"
      type="index"
      width="150"
			align="center">
    </el-table-column>
		<el-table-column class-name=".detailShow" prop="images" label="主图预览" width="200" align="center">
			<template #default="scope">
				<img style="width: 100px; height: 100px" :src="HttpnewImg + scope.row.images">
			</template>
		</el-table-column>

		<el-table-column  prop="title" label="商品名称" width="200" align="center" />
		<el-table-column prop="catid" label="产品系列" width="200" align="center">
			<template #default="scope">
				{{scope.row.catid}}
			</template>
		</el-table-column>
		<el-table-column  prop="kucun" label="库存数量" width="200" align="center" />
		<el-table-column  prop="jfnum" label="兑换积分/商品价值" width="250" align="center">
			<template #default="scope">
				{{ scope.row.jfnum || 0}}积分/{{ scope.row.jiag || 0}}元
			</template>
		</el-table-column>
		<el-table-column class-name=".detailShow" prop="spxqimg" label="详情图片" width="250" align="center">
			<template #default="scope">
				<img style="width: 100px; height: 100px" :src="HttpnewImg + scope.row.spxqimg">
			</template>
		</el-table-column>
		
		<el-table-column fixed="right" label="操作" align="center" width="250">
			<template #default="scope">
					<div class="addbuts cur"  @click="eid(scope.row.id)">+ 编辑详情</div>
					<div class="addbutss cur"  @click="del(scope.row.id)">+ 删除抽奖</div>
			</template>
		</el-table-column>
	</el-table>
</div>

</template>
<script>
import UploadFile from 'element-plus'
import {
	ElMessageBox,
	ElMessage
} from 'element-plus'
export default {
	components: {
		[UploadFile.name]: UploadFile
	},
	data() {
		return {
			HttpImg: "http://gyycadmincss.hansn.cn",
			HttpnewImg:"https://ckmco-video.oss-cn-shanghai.aliyuncs.com/",
			tableData: [],
			jxlist: [],
			jxform: [],
			form: [],
			tplist:[],
			form1: [],
			nastext:0,
			navtext:['骑行装备','节日限定','优惠服务'],
			dialogFormVisible: false,
			dialogFormVisible1: false,
			dialogjx: false,
			formLabelWidth: '120px',
			imageUrl: "",
			optionshd: [{
				value: '骑行装备',
				label: '骑行装备'
			},
			{
				value: '节日限定',
				label: '节日限定'
			},
			{
				value: '优惠服务',
				label: '优惠服务'
			}
			],
			value: '',
			id: '',
			hdid: "",
			hdname: ""
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		handleUploadSuccess(response, file, fileList) {
      // 处理上传成功的回调函数
      if(!this.tplist){
        this.tplist=[]
      }

      this.tplist.push(response.data);
      this.form.lbimg = this.tplist;

    },
		addnavtext(index){
     this.nastext = index
		},
		tj(id,name) {
			this.dialogjx = true;
			this.hdid = id;
			this.hdname=name;
			this.getjxlist()
		},
		add() {
			this.form.title = "";
			this.form.images = "";
			this.form.lbimg = [];
			this.tplist=[];
			this.form.kucun = "";
			this.form.jfnum = "";
			this.form.jiag = "";
			this.form.spxqimg = "";
			this.id = ""
			this.form.catid=""
			this.dialogFormVisible=true
		},
		getjxlist() {
			this.$http.post("/index.php/index/Jf/jfcplist", {
				id: this.hdid
			}).then(res => {
				if (res.code == 200) {
					this.jxlist = res.data;
				}
			})
		},
		del(id) {
			ElMessageBox.confirm(
				'是否确定删除?',
				'', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
			)
				.then(() => {
					this.$http.post("/index.php/index/Jf/jfcpdel", {
						id: id
					}).then(res => {
						if (res.code == 200) {
							this.getData()
							ElMessage({
								message: '删除成功',
								type: 'success',
							})
						}
					})
				})
				.catch(() => {

				})
		},
		eid(id) {
			this.dialogFormVisible = true;
			this.tplist=[];
			this.id = id;
			this.$http.post("index.php/index/Jf/jfcpshow", {
				id: id
			}).then(res => {
				if (res.code == 200) {
					this.form = res.data[0];

					let arr=res.data[0].lbimg;
					this.tplist=JSON.parse(arr);
					console.log(this.tplist)
					
				}
			})
		},
    deleteImage(index) {
      ElMessageBox.confirm("是否确定删除?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.tplist.splice(index, 1);

        this.form.lbimg.splice(index, 1);
      });
    },
		getData() {
			this.tableData = []
			this.$http.post("/index.php/index/Jf/jfcplist").then(res => {
				this.tableData = res.data;
			})
		},
		postData() {
			// this.form.cjzt = this.value;
			let data = {
				title: this.form.title,
				images: this.form.images,
				lbimg: JSON.stringify(this.form.lbimg),
				kucun: this.form.kucun,
				jfnum: this.form.jfnum,
				jiag: this.form.jiag,
				sorts: '1',
				id: this.id,
				spxqimg: this.form.spxqimg,
				catid: this.form.catid,
				alink:''
			}
			this.$http.post(this.id ? "/index.php/index/Jf/jfcpupdate" : "/index.php/index/Jf/jfcpadd", data).then(res => {
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.id = ""
					ElMessage({
						message: this.id ? '编辑成功' : '新增成功',
						type: 'success',
					})
					this.getData()
				}
			})
		},
		getTimeFormat(zcTime) {
			let time = (new Date(zcTime).getTime()) / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
			return time;
		},
		disabledDateFun(time) {
			return time.getTime() < Date.now() - 8.64e7;
		},
		formatEmployment(type) {
			// 根据源数据经过处理 把处理之后的数据返回
			// 定义一个映射结构
			const map = {
				0: '未发布',
				1: '活动中',
				2: '已结束',
			}
			return map[type]
		},
		getLocalTime(nS) {
			return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
		}
	}
}
</script>
<style scoped>
.avatar-uploader{
	border: none;
}
.el-table__body {
    border-collapse: separate;
    border-spacing: 0 6px;
  }
.el-table__row{
	background-color: #F3F3F3 !important;
	margin-bottom: 6px !important;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.navtexts{
	display: flex;
	align-items: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.bianjicj{
	font-size: 24px;
	font-weight: 400;
	color: #000;
	margin-right: 32px;
}
.redtext{
	color: #FF0000;
	font-weight: 700 !important;
}
.quanbuhei{
	font-size: 18px;
	font-weight: 700;
	color: #000;
}
.quanbuhei span{
	margin: 0 42px 0 16px;
	color: #FF0000;
}
.jihuinavs{
	margin-right: 29px;
	font-size: 18px;
	font-weight: 400;
}
.addbut{
	position: absolute;
	right: 60px;
	top: 0px;
	width: 114px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background-color: #FF0000;
  color: #fff;
	border-radius: 20px;
}

.addbutx{
	width: 114px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background-color: #FF0000;
  color: #fff;
	border-radius: 20px;
	margin-left: 30px;
}
.addbuts{
	margin-top:6px;
	width: 114px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background-color: #fff;
  color: #000;
	border-radius: 20px;
	margin-left: 30px;
}
.addbutss{
	margin-top:6px;
	width: 114px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background-color: #FF0000;
  color: #fff;
	border-radius: 20px;
	margin-left: 30px;
}
</style>
